import React, { useEffect } from 'react'
import Icon from '@/components/Icon'
import '../index.scss'
import { joinCrat } from '@/api/home'
import { Toast, Dialog } from 'antd-mobile'
import { useNavigate } from 'umi'
type Props = {
  itemsinger: any[],
  toCateDetail: any
  fn2: any
}
function Item(props: Props) {
  const navigator = useNavigate()
  // 加入购物车
  const itemJoinCrat = (id: number) => {
    joinCrat({
      goodsId: id,
      number: 1
    }).then(res => {
      if (res.data.code === 0) {
        Toast.show({
          content: '加入购物车成功'
        })
      }
      if (res.data.code === 2000) {
        Dialog.confirm({
          content: '登录过期，是否重新登录',
          onConfirm() {
            navigator('/login')
          }
        })
      }
    })
  }
  return (
    <div className="conitemDiv" >
      {
        props.itemsinger.map((item: any) => (
          <div className="singerItem" key={item.id} onClick={() => {
            props.toCateDetail(item.id)
          }}>
            <div className="singerLeft">
              <img src={item.pic} alt="" />
            </div>
            <div className="singerright">
              <p className='pName'>{item.name}</p>
              <p className='pPrice'>{`￥${item.originalPrice}`}</p>
            </div>
            <div>

            </div>
            <div className='listIcon' onClick={(e) => {
              e.stopPropagation()
              itemJoinCrat(item.id)
            }}>
              <Icon name='icon-cart' size={30} />
            </div>
          </div>
        ))
      }

    </div >
  )
}
export default Item
